<!--<template lang="html">-->
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>黑马面面</title>
    <meta name="description" content="黑马面面">
    <meta name="keywords" content="黑马面面">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../../css/element-ui.css">
    <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../css/style.css">

    <script src="../../js/vue.js"></script>
    <script src="../../js/element-ui.js"></script>
    <script src="../../js/data.json"></script>
    <script src="../../js/base.js"></script>
    <link rel="stylesheet" href="../../css/Stylesheet.css">
    <script src="../../js/axios-0.18.0.js"></script>
</head>

<body class="hold-transition">
<div id="app" class="main" v-loading="loading">
    <div class="card-header clearfix">
        <div class="answer-card f-l m-l-10">
            <!--图标-->
            <span class="el-icon-date button-top">{{courseName}}</span>
        </div>
        <div class="button-content">
            <el-button type="primary" class="el-icon-upload2 " style="height: 35px;width: 25%" @click="submitPaper">交卷
            </el-button>
            <el-button type="info" class="el-icon-view " style="height: 35px;width: 25%" @click="setMark">设置待做
            </el-button>
            <el-button type="primary" class="el-icon-upload2 " style="height: 35px;width: 25%" @click="tempSubmit">暂时提交
            </el-button>
        </div>
        <div class="button-content">
            <el-button v-for="(item,index) in this.length" :key="index"
                       :type="buttonType(index)"
                       class="stu-answer-item"
                       @click="clickAnswerCard(index)">{{index + 1}}
            </el-button>
        </div>
    </div>
    <div class="card-content">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>第{{questionId + 1}}题（  {{questionTypeText}}  ）{{radio}}</span>
            </div>
            <!--单选-->
            <div class="q-single" v-show="questionType === 2">
                <!--题目-->
                <div class="question1">
                    {{currentQuestion.subject}}
                </div>
                <!--选项-->
                <div class="answer">
                    <div class="answer-item" v-for="(item,index) in currentQuestion.choice">
                        <el-radio v-model="radio" :label="index">{{item}}</el-radio>
                    </div>
                </div>
            </div>
            <el-button style="float: left;margin-bottom: 10px" type="primary" @click="BackQuestion">上一题</el-button>
            <el-button style="float: left;" type="primary" @click="nextQuestion">下一题</el-button>
        </el-card>
    </div>

</div>
<span>111</span>
</body>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                // 这一题的题目
                currentQuestion: {},
                // 题库名字
                courseName: '',
                // 题库id
                courseId: 0,
                // 待做标志
                markFlag: [],
                // 加载中
                loading: false,
                // 问题的长度
                length: 0,
                // 弹窗
                dialogVisible: false,
                answer: [],
                // 后台获取的所有数据
                questionList: [
                    {markFlag: 0}
                ],
                // 题目类型
                questionType: 2,
                textarea: '',
                // 单选
                radio: '',
                checked: [],
                // 题目id
                questionId: 0,
                // 用户id，从session获取
                userId: sessionStorage.getItem("userId"),
                // 选项
                transformChar: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
                // 开始时间（不用）
                startTime: '',
                // 结束时间（不用）
                endTime: '',
                hour: 0,
                min: 0,
                sec: 0,
                timer: 0,
                // 离开页面时间
                onblurTime: 0,
            }
        },
        computed: {
            // 看看是什么类型
            questionTypeText: function () {
                switch (this.questionType) {
                    case 1://填空
                        return '填空题';
                        break;
                    case 2://选择
                        return '单选题';
                        break;
                    case 3://多选
                        return '多选题';
                        break;
                    case 4://判断
                        return '判断题';
                        break;
                    case 5://简答
                        return '简答题';
                        break;
                    case 6://程序
                        return '程序题';
                        break;
                }
            }
        },
        methods: {
            // 获取url参数
            getUrlParam(name) {
                let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                let r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },
            // 切换第几题颜色
            buttonType(index) {
                let answer = this.questionList.questions[index].answer;
                // console.log("answerVo====" + answerVo);
                if (answer === 'undefined' || answer === null) {
                    return "plain";
                } else if (this.markFlag[index] === 1) {
                    return "info";
                } else {
                    return "primary";
                }

            },
            // 加载题目
            initExam() {
                // 如果没有题目
                if (this.length === 0) {
                    //真数据
                    axios.post('/subject/getSubject.do', {
                        "userId": this.userId,
                        "courseId": this.courseId
                    }).then(res => {
                        //返回信息
                        this.$message({
                            message: res.data.message,
                            type: res.data.flag ? "success" : "error"
                        });
                        //成功就刷新
                        if (res.data.flag) {
                            // 获取所有结果
                            this.questionList = res.data.result;
                            // 获取题库名字
                            this.courseName = this.questionList.coursename;
                            // 获取答案
                            if (this.questionList.answer !== null) {
                                this.answer = this.questionList.answer;
                            }
                            // 获取题目的长度
                            this.length = this.questionList.questions.length;
                            // 获取第一题题目
                            this.currentQuestion = this.questionList.questions[this.questionId];
                            // 获取获取第一题题目类型
                            this.questionType = parseInt(this.currentQuestion.type);
                            // 获取第一题已选答案放入页面中
                            if (this.answer.length !== 0) {
                                this.setAnswer(this.questionType, this.answer[0]);
                            }
                            // 如果是多选
                            if (this.questionType === 3) {
                                for (let i = 0; i < this.currentQuestion.choice.length; i++) {
                                    this.checked.push(false);
                                }
                            }
                        }
                    })
                } else {
                    // 更新题目
                    let id = this.questionId;
                    // 获取题目
                    this.currentQuestion = this.questionList.questions[id];
                    // 获取题目类型
                    this.questionType = parseInt(this.currentQuestion.type);
                    // 获取已选答案放入页面中
                    if (typeof this.answer[id] != 'undefined') {
                        this.setAnswer(this.questionType, this.answer[id]);
                    }
                    // 如果是多选
                    if (this.questionType === 3) {
                        for (let i = 0; i < this.currentQuestion.choice.length; i++) {
                            this.checked.push(false);
                        }
                    }
                }
                // 时间 暂时不要
                /*this.timer = window.setInterval(() => {

                    let timeLast = new Date(this.endTime).getTime() - new Date().getTime();
                    let hour = parseInt(timeLast / (1000 * 60 * 60));
                    let min = parseInt((timeLast % (1000 * 60 * 60)) / (1000 * 60));
                    let sec = parseInt(((timeLast % (1000 * 60 * 60)) % (1000 * 60)) / 1000);
                    this.hour = hour < 10 ? '0' + hour : hour;
                    this.min = min < 10 ? '0' + min : min;
                    this.sec = sec < 10 ? '0' + sec : sec;

                    if (this.hour == 0 && this.min == 0 && this.sec == 0) {
                        window.clearInterval(this.timer);
                        this.submitPaper();
                    }

                }, 1000)*/

            },
            // 设置待做
            setMark() {
                let id = this.questionId;
                if (this.markFlag[id] === 1) this.markFlag[id] = 0;
                else this.markFlag[id] = 1;
                //通过id加减来刷新页面
                this.refresh();
            },
            // 应该是交卷(完成一半)
            submitPaper() {
                this.loading = true;
                // 在页面内？
                window.onblur = null;
                // 保存当前选项
                this.saveAnswer(false);
                // 定义收答案的
                axios.post('/answer/submit.do?id=' , {
                    "userId": this.userId,
                    "courseId": this.courseId,
                    "courseName": this.courseName,
                    "answer": this.answer
                }).then(res => {
                    //返回信息
                    this.$message({
                        message: res.data.message,
                        type: res.data.flag ? "success" : "error"
                    });
                    //成功就刷新
                    if (res.data.flag) {
                        this.loading = false;
                        window.location.href = "/pages/questionClassicList-stu.html";
                    }
                })
                // 感觉像是axios，交卷然后跳转
                /* httpServer({
                     url: '/exam/submit_paper'
                 }, {
                     userId: this.userId,
                     answerVo: answerVo
                 })
                     .then((res) => {
                         if (res.data.respCode == '1') {
                             // 考试须知，应该是没到考试时间给打回来
                             this.$router.push(`/main/homepage`);
                         }
                     })*/
            },
            // 选择哪一题
            clickAnswerCard(index) {
                // 保存答案
                this.saveAnswer(false);
                // console.log("this.questionId" + this.questionId);
                // console.log("index" + index);
                // 如果是当前题目，直接return
                if (index === this.questionId) {
                    return;
                }
                // 题目id加1
                this.questionId = index;
                // 刷新题目
                this.initExam();
            },
            // 保存选项（true 是保存后清空选项）
            saveAnswer(type) {
                // let questionId = parseInt(this.$route.params.questionId);
                let questionId = parseInt(this.questionId);
                let answer = '';
                //最后一题清空？
                switch (this.questionType) {
                    case 1://填空
                    case 5://简答
                    case 6://程序
                        answer = this.textarea;
                        if (this.questionList.length - 1 !== questionId && type) {
                            this.textarea = '';
                        }
                        break;
                    case 2://选择
                    case 4://判断
                        answer = this.radio;
                        if (this.questionList.length - 1 !== questionId && type) {
                            //清空选项
                            this.radio = '';
                        }
                        break;
                    case 3://多选
                        answer = this.checked;
                        if (this.questionList.length - 1 !== questionId && type) {
                            this.checked = [];
                        }
                        break;
                }
                //存到集合里面
                this.answer[questionId] = answer;

            },
            // 下一题（基本完成）
            nextQuestion() {
                // 拿id
                let questionId = parseInt(this.questionId);
                // 如果是最后一题,直接return
                if (this.length - 1 === questionId) {
                    this.$message({
                        showClose: true,
                        message: "这是最后一题啦",
                        type: 'error'
                    });
                    return;
                }
                // 保存这一题已做的选项
                this.saveAnswer(true);
                // console.log(this.questionId)
                // 题目id加1
                // 进入下一题
                this.questionId = questionId + 1;
                // console.log(this.questionId)
                // 刷新题目
                // 把题目刷新出来
                this.initExam();
                // 还是重定向到本页面啊
                // this.$router.push(`/main/exam/${this.$route.params.paperId}/${questionId}`);
            },
            // 上一题（基本完成）
            BackQuestion() {
                // 拿id
                let questionId = parseInt(this.questionId);
                // 如果是最后一题
                if (0 === questionId) {
                    this.$message({
                        showClose: true,
                        message: "这是第一题啦",
                        type: 'error'
                    });
                    return;
                }
                // 清空选项
                this.saveAnswer(true);
                // 题目id加1
                this.questionId = questionId - 1;
                // 刷新题目
                this.initExam();
                // 还是重定向到本页面啊
                // this.$router.push(`/main/exam/${this.$route.params.paperId}/${questionId}`);
            },
            // 把已选答案放到页面上
            setAnswer(questionType, answer) {
                switch (questionType) {
                    case 1://填空
                    case 5://简答
                    case 6://程序
                        this.textarea = answer;
                        break;
                    case 2://选择
                    case 4://判断
                        // this.radio = Number(answer);
                        if (typeof answer === 'string')
                            this.radio = Number(answer);
                        else
                            this.radio = answer;
                        break;
                    case 3://多选
                        this.checked = answer;
                        break;
                }

            },
            // 通过id加减来刷新页面
            refresh() {
                this.questionId++;
                this.questionId--;
            },
            // 暂时保存
            tempSubmit() {
                // 保存当前选项
                this.saveAnswer(false);
                console.log("this.answer");
                console.log(this.answer);
                //要提交到暂时保存的地方
                axios.post('/answer/tempSubmit.do', {
                    "userId": this.userId,
                    "courseId": this.courseId,
                    "answerString": this.answer.toString(),
                    "answer": this.answer
                }).then(res => {
                    //返回信息
                    this.$message({
                        message: res.data.message,
                        type: res.data.flag ? "success" : "error"
                    });
                    //成功就刷新
                    if (res.data.flag) {
                        this.loading = false;
                        // window.location.href = "/pages/questionClassicList-stu.html";
                    }
                })
            }
        },
        created() {
            // 获取题库id
            this.courseId = this.getUrlParam("courseId");
            this.initExam();
        },
        watch: {
            $route(to, from) {
                this.questionId = parseInt(this.$route.params.questionId) + 1;
                this.currentQuestion = this.questionList[this.$route.params.questionId];
                this.questionType = parseInt(this.currentQuestion.type);
                // 如果有答案就显示到页面上
                if (typeof this.currentQuestion.answer != 'undefined') {
                    this.setAnswer(this.questionType, this.currentQuestion.answer);
                }
                // 多选
                if (this.questionType === 3) {
                    for (let i = 0; i < this.currentQuestion.choice.length; i++) {
                        this.checked.push(false);
                    }
                }
            }
        }
    })
</script>

<style lang="css">
    [v-cloak] {
        display: none;
    }

    .card-header {
        padding: 10px;
        font-size: 20px;
        margin-top: 30px
    }

    .answer-card {
        cursor: pointer;
        width: 100%;
        margin-top: 10px;
    }

    .time {
        margin-top: 10px;
    }

    .answer-item {
        padding: 10px;
    }

    .question1 {
        padding: 10px 0;
    }

    .card-content {
        width: 590px;
        /*margin: 0 auto;*/
        margin-left: 19px;
        min-height: 700px;
        /*margin-top: 40px;*/
    }

    .button-content {
        width: 600px;
        /*margin: 10px;*/
        margin-left: 10px;
        margin-top: 10px;
    }

    .box-card {
        min-height: 500px;
    }

    .button-top {
        font-size: 30px;
        height: 40px;
    }


    .stu-answer-item {
        margin-right: 10px;
        margin-top: 10px;
        width: 50px;
        height: 50px;
    }

    .el-button + .el-button {
        margin-left: 0px;
    }

    .q-single {
        /*height: 90%;*/
        margin-bottom: 10px;
    }

</style>
